<template>
  <table class="table">
    <tr v-for="(item, index) in messageList" :key="index" style="highlight-row">
      <td class="square">
	  <div class="red-square">{{ item.type }}</div>
	  </td>
      <td class="details">
        <div class="approve_color"><b>{{ item.type }}</b><span>审批</span></div>
        <div>申请人：{{ item.name }}&nbsp;申请时间：{{transferTime(item.apply_time)}}</div>
      </td>
      <td>
        <button @click="viewDetails(item)" style="color: #888888;">查看详情</button>
      </td>
    </tr>
  </table>
</template>

<script>
	import axios from "axios"
export default {
	
  name: 'TableWithDetails',
  data() {
    return {
      messageList: []
    };
  },
  mounted() {
	const that=this
  	const url = this.$API_URL+'/teacher/getWApply';
	axios.get(url, {
	  params: {
	    manage_id: 1
	  }
	}, {
	  headers: {
	    'Content-Type': 'application/json'
	  }
	})
	.then(response => {
	  console.log(response);
	  var temp=response.data;
	  for(var t of temp){
	  	if(t.type=='study') t.type='学业成绩'
	  	else if(t.type == 'academic') t.type='学术竞赛'
	  	else if(t.type == 'general') t.type='综合素质'
	  }
	  console.log(temp)
	  that.messageList=temp;
	  console.log(that.messageList);
	})
	},
	computed: {
		transferTime: function() {
			return function(str) {
				var arr=str.split(" ");
				var monthTable=[
					"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
				]
				var day=arr[1];
				var month=monthTable.indexOf(arr[2])+1;
				var year=arr[3];
				return year+"-"+month+"-"+day;
			}
		},
		},
  methods: {
    viewDetails(item) {
		console.log(item)
      this.$router.push({
        path: '/approve',
        query: { applyId: item.id }
      });
    }
  }
};
</script>

<style scoped>
.table {
  width: 100%;
  border-collapse: separate; /* Changed from collapse to separate */
  border-spacing: 0 10px; /* Adds spacing between rows */
  text-align: left;
}

.table tr:nth-child(odd) { /* Selects odd rows */
  background-color: #f0f0f0; /* Sets background color to light grey */
}
.table td {
    height: 75px;
	overflow:hidden
  }
.red-square {
  background-color: #951d1d;
  color: white;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square{
	width:75px;
	height:75px;
}
.approve_color{
	color: #951d1d;
}
.approve_color span{
	color: #000000;
}
.details {
  /* Styles for the details cells */
}

button {
  /* Styles for the button */
  border: none;
  background-color: transparent;
  color: blue;
  cursor: pointer;
}

button:hover {
  text-decoration: underline;
}
</style>
